<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件使用props</title>
    <!--    react 核心库-->
    <script type="text/javascript" src="./yl/react.development.js"></script>
    <!--    用于支持react操作dom-->
    <script type="text/javascript" src="./yl/react-dom.development.js"></script>
    <!--    用于将jsx 转为 js-->
    <script type="text/javascript" src="./yl/babel.min.js"></script>
    <!--    用于对组件标签进行限制-->
    <script type="text/javascript" src="./yl/prop-types.js"></script>

</head>
<body>

<!--
props 接收的参数是只读的
-->
<div id="app"></div>
<script type="text/babel">
    function Person(props) {
        const  {name,age,like} =props
        return (
            <div>
                <ul>
                    <li>{name}</li>
                    <li>{age}</li>
                    <li>{like}</li>
                </ul>
            </div>
        )
    }
    //函数使用props对参数进行限制时，没有办法将限制写在函数式组件的方法体里面，但是可以通过写在方法体外面实现
    Person.prototypes={
        name:PropTypes.string
    }
    Person.defaultProps=  {
        like:'爱好'
    }
    ReactDOM.render(<Person age="16" name="123"/>, document.getElementById('app'))
</script>
</body>
</html>
